<template>
  <div 
  ref="msg"
  :class="['msg-box',reverse&&'reverse-msg-box']">
    <template v-if="reverse">
        <div class="msg-info">
            <span v-if="!type">{{msg}}</span>
            <el-image 
                v-if="type =='image'"
                style="width: 150px; "
                :src="url" 
                :preview-src-list="srcList">
            </el-image>
            <audio 
            v-if="type == 'audio'"
            controls
            :src="url"></audio>
            <video 
            v-if="type == 'video'"
            controls
            style="width: 400px; "
            :src="url"></video>
        </div>
        <div class="msg-avatar">
            <el-image
                style="width: 50px;height: 50px; "
                :src="`${this.$API}${avatar}`" 
                :preview-src-list="[`${this.$API}${avatar}`]">
            </el-image>
        </div>
    </template>
    <template v-else>
        <div class="msg-avatar">
            <el-image 
                style="width: 50px;height: 50px;"
                :src="`${this.$API}${avatar}`" 
                :preview-src-list="[`${this.$API}${avatar}`]">
            </el-image>
        </div>
        <div class="msg-info-reverse">
            <span v-if="!type">{{msg}}</span>
            <div v-if="type">
                点击下载已加密文件：
                <a 
                target="_blank"
                :download="`${msg}`"
                :href="`${this.$API}/upload/${msg}`">{{msg}}</a>
            </div>
            <div v-if="type">密钥: {{r4k}}</div>
            <el-image 
                v-if="type =='image'"
                style="width: 150px;"
                :src="url" 
                :preview-src-list="srcList">
            </el-image>
            <audio 
            v-if="type == 'audio'"
            controls
            :src="url"></audio>
            <video 
            v-if="type == 'video'"
            controls
            style="width: 400px; "
            :src="url"></video>
        </div>
    </template>
  </div>
</template>

<script>
import axios from 'axios';
import { DecryptFile } from '../utils/crypto'
export default {
    name: 'group-msg',
    props: {
        reverse: {
            default: false,
            type: Boolean
        },
        avatar: {
            default: '',
            type: String
        },
        user: {
            default: '',
            type: String,
        },
        msg: {
            default: '',
            type: String
        },
        type: {
            default: '',
            type: String
        },
        fr :{
            default: '',
            type: String
        },
        r4dk: {
            default: '',
            type: String
        },
        r4k: {
            default: '',
            type: String
        },
    },
    data() {
        return {
            url: '',
            srcList: []
        }
    },
    computed:{
        myAvatar() {
            return JSON.parse(window.localStorage.getItem('chat-user'))?this.$API+JSON.parse(window.localStorage.getItem('chat-user')).avatar:''
        },
        userAvatar() {
            const usr = this.$_.users.find(u => u.userid == this.fr);
            return usr?this.$API+usr.avatar: ''
        }
    },
    created() {
        if (this.type && !this.reverse) {
            axios.get(`${this.$API}/upload/`+this.msg)
            // axios.get('http://139.129.117.239:3080/upload/'+this.msg) //ali
            .then(res => {
                DecryptFile(this.msg, res.data, this.r4k)
                .then(dfile => {
                    this.url = window.URL.createObjectURL(dfile);
                    this.srcList = [window.URL.createObjectURL(dfile)]
                })
            })
        } else if(this.reverse && this.type ) {
            this.url = this.msg;
            this.srcList = [this.msg]
        }
    },
    mounted(){
        this.$refs.msg.scrollIntoView({ block: 'end' })
    }
}
</script>

<style scoped>
.msg-box {
    margin-bottom: 20px;
    display: flex;

}
.reverse-msg-box {
    justify-content: flex-end;
}
.reverse-msg-box .msg-info {
    background: #67C23A;
}
.msg-avatar {
  width: 50px;
  height: 50px;
  font-size: 24px;
  position: relative;
  margin-right: 24px;
  border-radius: 5px;
  overflow: hidden;
}
.reverse-msg-box .msg-avatar {
  margin-right: 0px;
  margin-left: 24px;
}
.msg-avatar span {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  text-align: center;
  line-height: 50px;
  color: aliceblue;
  background-size: cover;
}
.msg-info {
    background-color: #fff;
    padding: 10px 22px;
    border-radius: 7px;
    border: 1px solid #EEE;
    position: relative;
    line-height: 30px;
    filter: drop-shadow(0px 2px 4px rgba(103, 194, 57,0.9) );
    
}
.msg-info::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent rgb(103, 194, 57)  transparent;
    position: absolute;
    top:15px;
    right: -13px;
    margin: auto;
    z-index: 2;
    transform: rotateZ(90deg);
}
.msg-info::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent  #eee transparent;
    position: absolute;
    top:15px;
    right: -15px;
    margin: auto;
    z-index: 1;
    transform: rotateZ(90deg);
}

.msg-info-reverse {
    background-color: #fff;
    padding: 10px 22px;
    border-radius: 7px;
    border: 1px solid #EEE;
    position: relative;
    filter: drop-shadow(0px 2px 4px  #999);
    max-width: 600px;
    word-break: break-all;
    line-height: 30px;
}
.msg-info-reverse::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #999  transparent;
    position: absolute;
    top:15px;
    left: -13px;
    margin: auto;
    z-index: 2;
    transform: rotateZ(-90deg);
}
.msg-info-reverse::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent  #fff transparent;
    position: absolute;
    top:15px;
    left: -13px;
    margin: auto;
    z-index: 2;
    transform: rotateZ(-90deg);
}

</style>